<template>
    <div id="app">
        <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
    export default {
        name:"App",
        data(){
            return {
                isRouterAlive: true
            }
        },
        methods:{
            reload () {
                this.isRouterAlive = false;
                this.$nextTick(function() {
                    this.isRouterAlive = true
                })
            }
        },
        provide () {
            return {
                reload: this.reload
            }
        },
        //解决vuex在页面刷新时的数据丢失问题
        created() {
            //在页面加载时读取sessionStorage里的状态信息
            if (sessionStorage.getItem("store") ) {
                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
            }

            //在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener("beforeunload",()=>{
                sessionStorage.setItem("store",JSON.stringify(this.$store.state))
            })
        },
    }
</script>

<style>
    html, body, #app {
        height: 100%;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    body {
        margin: 0;
    }

    #app {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #ffffff;
    }

    .router-link-active {
        text-decoration: none;
        color: cornflowerblue;
    }
</style>
